<template>
	<scroll-view :scroll-top="zjcScrollTop" scroll-y class="scroll-view" @scroll="handleScroll">
		<div style="background-color: #000;">
			<div
				style="display: flex;align-items: center;position: relative;width: 90%;margin: 0 auto;padding-top: 3.0em;">
				<div style="width: 25%;text-align: center;">
					<image src="/static/imgs/pinpaijieshao.png" style="height: 5em;" mode="heightFix" @click="toBrand">
					</image>
				</div>
				<div style="width: 25%;text-align: center;" @click="guaranteeAdd">
					<image src="/static/imgs/zhibaoluru.png" style="height: 5em;" mode="heightFix"></image>
				</div>
				<div style="width: 25%;text-align: center;" @click="guaranteeList">
					<image src="/static/imgs/zhibaochaxun.png" style="height: 5em;" mode="heightFix"></image>
				</div>
				<div style="width: 25%;text-align: center;" @click="toOffer">
					<image src="/static/imgs/baojiachaxun.png" style="height: 5em;" mode="heightFix"></image>
				</div>
			</div>
			<div style="margin-top: 1.0em;position: relative;">
				<div style="position: absolute;left: 0;bottom: 1.9em;width: 100%;color: #fff;z-index: 1;">
					<div @click="guaranteeList"
						style="background-color: #fff;border-radius: 0.5em;height: 3em;margin: 0.8em;display: flex;padding: 0.5em;box-sizing: border-box;">
						<div style="width: calc(100% - 4.5em);">
							<!-- <input type="text" focus="this.blur();"
								style="border: 1px solid #ccc;height: 2.0em;width: 100%;color: #1f1f1f;padding:0.5em;box-sizing: border-box;"
								placeholder="按手机号/车牌号查询" /> -->
							<div style="border: 1px solid #ccc;color: #5B5B5B;font-size: 1.0em;padding: 0.2em;height: 1.5em;">按手机号/车牌号查询</div>
						</div>
						<div
							style="width: 4em;text-align: center;background-color: #D48C00;color: #fff;height: 2.0em;line-height: 1.8em;margin-left: 0.5em;">
							查询</div>
					</div>
				</div>
				<image src="/static/imgs/tu.png" style="width: 100%;" mode="widthFix"></image>
			</div>
			<div>
				<div style="position: relative;margin: 1.5em;height: 21em;color: #fff;">
					<div style="font-size: 1.1em;position:absolute;left: 0;top: 0; z-index: 1;">品牌介绍 CASE CENTER</div>
					<div style="position: absolute;left: 0;top: 0;width: 100%; z-index: 0;">
						<image src="/static/imgs/lou.jpg" style="width: 100%;" mode="widthFix"></image>
					</div>
					<div style="position: absolute; top: 10em;">
						<div style="font-size: 1.1em;" id="targetScrollDiv">新一代国民车模品牌</div>
						<div style="font-size: 0.9em;margin-top: 0.6em;">
							<div style="text-indent: 2.0em;">
								我们致力于为所有汽车提供漆面以及车窗最完整的产品系列，
								以卓越的品质亲民的价格给您带来全方位守护。
							</div>

							<div style="text-indent: 2.0em;">
								品牌产品多元化，车窗膜、漆面保护膜可以一步到位满足广大车主消费需求。
								致力于打造源头工厂研发、生产、销售于一体的高性价比产品，为车主带来新的消费观。
							</div>
						</div>
					</div>
				</div>
			</div>
			<div style="margin: 1.0em;">
				<image src="/static/imgs/zhuanli.png" style="width: 100%;" mode="widthFix"></image>
			</div>
			<div style="margin: 1.0em;padding-bottom: 5em;">
				<image src="/static/imgs/zizhuyanfa.png" style="width: 100%;" mode="widthFix"></image>
			</div>
		</div>
	</scroll-view>
	<customTabbar :isIndexPage="true" />
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import customTabbar from '@/component/custom-tabbar.vue'


	const guaranteeAdd = () => {
		uni.setStorageSync('tabIndex', 1);
		uni.redirectTo({
			url: '/guarantee/addlist'
		})
	}

	const guaranteeList = () => {
		uni.setStorageSync('tabIndex', 2);
		uni.redirectTo({
			url: '/guarantee/list'
		})
	}

	const toOffer = () => {
		uni.setStorageSync('tabIndex', 3);
		uni.redirectTo({
			url: '/offer/index'
		})
	}

	let zjcScrollTop = ref(0);
	let scrollThrottled = ref(false);
	const handleScroll = (e) => {
		if (!scrollThrottled.value) {
			scrollThrottled.value = true;
			zjcScrollTop.value = e.detail.scrollTop;
			setTimeout(() => {
				scrollThrottled.value = false;
			}, 1500); // 调整延迟时间以适应需求
		}
	}
	//品牌介绍
	const toBrand = () => {
		wx.createSelectorQuery().select('#targetScrollDiv').boundingClientRect(res => {
			if (res) {
				//console.log('元素的 top 值:', res.top);
				zjcScrollTop.value = res.top;
			}
		}).exec();

	}

	onMounted(() => {
		wx.createSelectorQuery().select('#targetScrollDiv').boundingClientRect(res => {
			if (res) {
				//console.log('元素的 top 值:', res.top);
				zjcScrollTop.value = res.top;
			}
		}).exec();
	});
</script>

<style scoped>
	.scroll-view {
		height: 100vh;
		overflow-y: scroll;
		box-sizing: border-box;
	}
</style>